<template>
  <div>
    <div class="bf">
      <span class="shang" @click="go">&lt;返回</span>
      <p>不凡</p>
    </div>
    <ul>
      <li v-for="item in list" :key="item.id" class="haha">
        <p class="name">{{ item.name }}</p>
        <span class="mobile">{{ item.mobile }}</span>
        <p class="address">{{ item.address }}</p>
        <div class="line"></div>
      </li>
    </ul>

    <div class="new" @click="time">新建地址</div>
  </div>
</template>

<script>
import { no, orange } from "@/api/cart/index.js";
export default {
  data() {
    return {
      chosenAddressId: "1",
      list: []
    };
  },

  computed: {},
  created() {
    orange({
      openId: "1231"
    }).then(res => {
      console.log(res);
      this.list = res.data;
    });
  },
  mounted() {},
  methods: {
    go() {
      this.$router.push({
        name: "cart1"
      });
    },
    time() {
      this.$router.push({
        name: "cart3"
      });
    }
  }
};
</script>

<style scoped lang="scss">
.line {
  width: 320px;
  height: 2px;
  background-color: #f5f5f5;
  position: absolute;
  left: 20px;
}
.address {
  position: absolute;
  left: 70px;
  margin-top: 60px;
}
.haha {
  width: 100%;
  height: 100px;
  background-color: #fff;
  margin-bottom: 10px;
}
.name {
  position: absolute;
  left: 20px;
  margin-top: 30px;
}
.mobile {
  position: absolute;
  left: 70px;
  margin-top: 32px;
}
.bf p {
  font-size: 14px;
  color: brown;
}
a {
  text-decoration: none;
  color: brown;
  font-size: 14px;
  position: absolute;
  left: 20px;
  top: 20px;
}
.span {
  margin-left: 20px;
}
.shang {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 15px;
  left: 30px;
}
.new {
  width: 300px;
  height: 50px;
  background-color: brown;
  color: #fff;
  font-size: 16px;
  position: absolute;
  line-height: 50px;
  top: 550px;
  left: 30px;
}
</style>